<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="styles.css">
</head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<body>
<div class="container">
    <div id="login-form">
        <h2>登录</h2>
        <input type="text" id="login-username" placeholder="用户名" required>
        <input type="password" id="login-password" placeholder="密码" required>
        <button onclick="login()">登录</button>
        <p>还没有账号？<a href="register.html" id="register-link">注册</a></p>
    </div>
</div>

<script>
    function login() {
        const credentials = {
            username: document.getElementById('login-username').value,
            password: document.getElementById('login-password').value
        };

        axios.post('http://localhost:8081/user/login', credentials)
            .then(response => {
                if (response.data.code === 1) {
                    // 存储token（根据实际接口调整）
                    // 原alert('登录成功！')
                    showModal('登录成功，正在跳转...', 'success');
                    window.location.href = 'index.html';
                } else {
                    showModal('登录失败', 'error');
                }
            })
            .catch(error => {
                console.error('登录请求出错:', error);
                showModal('登录失败', 'error');
            });
    }
</script>
<!-- 在每个页面的body末尾添加这个模态框结构 -->
<div id="customModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span id="modalStatusIcon" class="status-icon"></span>
            <h3 id="modalTitle"></h3>
        </div>
        <div class="modal-body">
            <p id="modalMessage"></p>
        </div>
        <div class="modal-footer">
            <button id="modalConfirmBtn" class="modal-btn">确定</button>
        </div>
    </div>
</div>

<style>
    /* 添加到现有样式表中 */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .modal-content {
        background: white;
        padding: 25px;
        border-radius: 12px;
        min-width: 300px;
        max-width: 90%;
        animation: modalFadeIn 0.3s ease;
    }

    .modal-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .status-icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        border-radius: 50%;
    }

    .success-icon {
        background: #4CAF50 url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>') center/16px no-repeat;
    }

    .error-icon {
        background: #f44336 url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v2h-2zm0-8h2v6h-2z"/></svg>') center/16px no-repeat;
    }

    .modal-title {
        margin: 0;
        font-size: 1.2em;
    }

    .modal-body {
        margin-bottom: 20px;
        color: #333;
    }

    .modal-btn {
        background: #2196F3;
        color: white;
        border: none;
        padding: 10px 25px;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.3s;
    }

    .modal-btn:hover {
        background: #1976D2;
    }

    @keyframes modalFadeIn {
        from { transform: scale(0.9); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
</style>

<script>
    // 通用模态框控制函数
    function showModal(message, type = 'info', title = '提示') {
        const modal = document.getElementById('customModal');
        const statusIcon = document.getElementById('modalStatusIcon');
        const modalTitle = document.getElementById('modalTitle');
        const modalMessage = document.getElementById('modalMessage');
        const confirmBtn = document.getElementById('modalConfirmBtn');

        // 设置图标
        statusIcon.className = 'status-icon';
        if(type === 'success') {
            statusIcon.classList.add('success-icon');
            modalTitle.textContent = title || '成功';
            modal.style.backgroundColor = 'rgba(76, 175, 80, 0.5)';
        } else if(type === 'error') {
            statusIcon.classList.add('error-icon');
            modalTitle.textContent = title || '错误';
            modal.style.backgroundColor = 'rgba(244, 67, 54, 0.5)';
        } else {
            modalTitle.textContent = title || '提示';
            modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        }

        modalMessage.textContent = message;
        modal.style.display = 'flex';

        // 自动关闭功能（可选）
        let autoCloseTimer = setTimeout(() => {
            hideModal();
        }, 5000); // 5秒后自动关闭

        // 确认按钮点击事件
        confirmBtn.onclick = () => {
            clearTimeout(autoCloseTimer);
            hideModal();
        };

        // 点击外部关闭
        modal.onclick = (e) => {
            if(e.target === modal) {
                clearTimeout(autoCloseTimer);
                hideModal();
            }
        };
    }

    function hideModal() {
        document.getElementById('customModal').style.display = 'none';
    }
</script>
</body>
</html>